<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>1111111111111111111111

<body>
    <canvas id="box" width="300" height="300" style="margin: 100px;"></canvas>
    <script>
        var box = document.querySelector('#box');
        var axt = box.getContext('2d');

        //圆形jjjjjjjjjjjjjjjjjjjjjjjjj

        axt.arc(150, 150, 150, 0, 2 * Math.PI);
        axt.fillStyle = 'black';
        axt.fill();
        axt.beginPath();
        axt.arc(150, 150, 150, Math.PI * 0.5, 3 / 2 * Math.PI);
        axt.fillStyle = 'white';
        axt.fill();
        //两个大半园mmmmmmmmmmmmmmmmm
        
        axt.beginPath();
        axt.arc(150, 75, 75, Math.PI * 0.5, 3 / 2 * Math.PI);
        axt.fillStyle = 'black';
        axt.fill();

        axt.beginPath();
        axt.arc(150, 225, 75, Math.PI * 0.5, 3 / 2 * Math.PI, true);
        axt.fillStyle = 'white';
        axt.fill();
        //太极豆豆完成kkkkkkkkkkkkkkkkkkkkkkkkkkk

        axt.beginPath();
        axt.arc(125, 75, 25, 0,  2 * Math.PI, true);
        axt.fillStyle = 'white';
        axt.fill();
        axt.stroke();

        axt.beginPath();
        axt.arc(150, 225, 25, 0,  2 * Math.PI, true);
        axt.fillStyle = 'black';
        axt.fill();
        //太极完成
        // axt.stroke();
    </script>
</body>

</html>